<template>
  <div class="tobBtoC">
    <div class="contentTopTitle">
      <div class="fl">
        <div class="title">码号-月-新用户分渠道收入</div>
      </div>
    </div>
    <div>
      <el-form :inline="true" :model="form" label-width="60px" class="formList">
        <el-form-item label="选择区域" style="width: 20%">
          <dx-cascader :area_id.sync="form.areaId" />
        </el-form-item>
        <el-form-item label="账期" style="width: 20%">
          <el-date-picker
            v-model="form.time"
            type="month"
            placeholder="选择账期"
            value-format="yyyyMM"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="渠道类型" style="width: 20%">
          <el-select v-model="form.types">
            <el-option
              v-for="(it, i) in types"
              :key="i"
              :label="it"
              :value="it"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width: 38%">
          <el-button
            style="margin-left: 20px"
            size="mini"
            type="primary"
            @click="handle_search"
            >查询</el-button
          >
          <el-button size="mini" type="orange" @click="handle_export(0)">
            导出当月
          </el-button>
          <el-button size="mini" type="orange" @click="handle_export(1)">
            导出当年
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="remark">
      <span class="attention">收入口径:</span>本年新发展资产的码号收入
    </div>
    <div class="table-content clearfix">
      <p class="g-unit">单位: 元</p>
      <div class="content" style="margin-top: 0">
        <div class="tableBox">
          <el-table
            id="table"
            v-loading="tableLoading"
            :data="tableData"
            style="width: 100%"
            class="tableTh28"
            border
            stripe
            ref="table"
            :span-method="arraySpanMethod"
          >
            <el-table-column min-width="90" label="本地网" prop="areaName" />
            <el-table-column
              min-width="110"
              label="渠道类型"
              prop="channelDeptName2014"
            />
            <el-table-column min-width="110" label="总收入" prop="zyIncome" />
            <el-table-column label="其中: 码号收入">
              <el-table-column min-width="100" label="移动" prop="ydIncome" />
              <el-table-column min-width="100" label="宽带" prop="kdIncome" />
              <el-table-column min-width="100" label="itv" prop="itvIncome" />
              <el-table-column min-width="100" label="固话" prop="ghIncome" />
              <el-table-column
                min-width="100"
                label="智能组网"
                prop="znzwIncome"
              />
              <el-table-column
                min-width="100"
                label="天翼看家"
                prop="tykjIncome"
              />
              <el-table-column
                min-width="100"
                label="家庭云"
                prop="jtyIncome"
              />
              <el-table-column
                min-width="100"
                label="挂机短信"
                prop="gjdxIncome"
              />
              <el-table-column
                min-width="100"
                label="来电名片"
                prop="ldmpIncome"
              />
              <el-table-column
                min-width="100"
                label="通讯助理"
                prop="txzlIncome"
              />
              <el-table-column min-width="100" label="云盘" prop="ypIncome" />
              <el-table-column
                min-width="100"
                label="其他"
                prop="otherIncome"
              />
              <el-table-column min-width="100" label="合计" prop="mhIncome" />
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import FileSaver from "file-saver";
import XLSX from "xlsx";
import { mergeSpan } from "@/utils/mixin";
const exportUrl = prefixAPI.pack;
export default {
  name: "incomeNumber",
  data() {
    return {
      form: {
        areaId: "",
        time: "",
        types: "全部",
      },
      tableData: [],
      tableLoading: false,
      types: ["全部", "电子渠道部门", "政企渠道部门", "实体渠道部门", "合计"],
      spanArr: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex == 0) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },
    async init() {
      let that = this;

      that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
      that.form.areaId = that.accountInfo.areaId;
      that.form.time = that.moment().subtract(1, "months").format("YYYYMM");
      that.getData();
    },
    getTypes() {
      $budgetAPI.getRecordTypeList({}, (res) => {
        this.typeslist = res.content;
      });
    },
    getData() {
      var that = this,
        title;

      that.tableLoading = true;
      $budgetAPI.getChannelMhData(
        {
          areaId: that.form.areaId,
          acctMonth: that.form.time,
          channelType: that.form.types == "全部" ? "" : that.form.types,
        },
        (res) => {
          that.tableData = [];
          var data = [];
          if (res && res.code == 0) {
            res.content.map((it) => {
              it.dataList.map((item, i) => {
                item["areaName"] = it.areaName;
              });
              data = [...data, ...it.dataList];
            });
            this.spanArr = mergeSpan(data, ["areaName"]);
            that.tableData = data;
          }
          that.tableLoading = false;
        }
      );
    },
    handle_search() {
      // if(!this.form.time || !this.form.fcDate) {
      // 	this.$message.error("请选择账期和版本");
      // 	return false
      // }
      this.getData();
    },
    handle_time(val) {
      this.form.time = val;
      this.form.fcDate = "";
      this.getFC(val);
    },
    handle_export(type) {
      var areaId = this.form.areaId,
        month = this.form.time,
        channelType = this.form.types == "全部" ? "" : this.form.types,
        token = getCookie("token");
      if (type == 0) {
        window.open(
          `${exportUrl}/channelMh/exporChannelMhData?areaId=${areaId}&acctMonth=${month}&channelType=${channelType}&token=${token}`,
          "_self"
        );
      } else {
        window.open(
          `${exportUrl}/channelMh/exporChannelMhYearData?areaId=${areaId}&acctMonth=${month}&channelType=${channelType}&token=${token}`,
          "_self"
        );
      }
    },
    handle_del(row) {
      var that = this;

      that
        .$confirm("是否删除?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
        .then(() => {
          $budgetAPI.getDeleteRecord(
            {
              recordId: row.recordId,
              token: getCookie("token"),
            },
            (res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.message,
                });
              }
              that.getData();
            }
          );
        });
    },
    handle_down() {
      var token = getCookie("token");

      window.location.href =
        prefixAPI.hp + "/api/incomeEstimateImport/downTemplate?&token=" + token;
    },
    // 批量导入上传文件传递数据
    changeFile(file, fileList) {
      this.fileList = fileList;
      this.param = new FormData();
      this.param.append("file", file.raw);
    },
    // 导入
    handle_import(type) {
      var that = this;

      that.$refs["importForm"].validate((valid) => {
        if (valid) {
          if (that.fileList.length == 0) {
            that.$message({
              message: "请选择需要上传的文件",
              type: "warning",
            });
            return false;
          }
          that.param.append("version", that.importForm.version);
          that.param.append("token", getCookie("token"));
          that.param.append("acctMonth", that.importForm.year);
          that.param.append("typeId", that.importForm.typeId);
          $budgetAPI.importIncomeEstimateData(
            that.param,
            (res) => {
              if (res.code == 0) {
                that.$message({
                  message: "导入成功",
                  type: "success",
                });
                that.getData();
              } else {
                that.$message.error(res.message);
              }
              that.dialogVisible = false;
            },
            (err) => {
              that.dialogVisible = false;
            }
          );
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    mergeTitles(data, type) {
      let tempArr = [];
      let afterData = [];
      for (let i = 0; i < data.length; i++) {
        if (tempArr.indexOf(data[i][type]) === -1) {
          afterData.push({
            label: data[i][type],
            horizonIndexId: data[i].horizonIndexId,
            origin: [data[i]],
          });
          tempArr.push(data[i][type]);
        } else {
          for (let j = 0; j < afterData.length; j++) {
            if (afterData[j].label == data[i][type]) {
              afterData[j].origin.push(data[i]);
              break;
            }
          }
        }
      }
      return afterData;
    },

    // hanlde_version(val) {
    // 	this.form.fcDate = val;
    // 	this.getData();
    // }
  },
};
</script>

<style lang="scss" scoped>
.remark {
  padding-top: 5px;
  text-align: left;
  .attention {
    font-weight: bold;
  }
}
.table-content {
  .table-header {
    display: flex;
    justify-content: space-between;
    .table-title {
      font-size: 14px;
      font-weight: bold;
      height: 30px;
      line-height: 30px;
      span {
        display: inline-block;
        width: 5px;
        height: 5px;
        background-color: #418ee9;
        border-radius: 1000%;
        overflow: hidden;
        margin-right: 10px;
        margin-bottom: 3px;
      }
    }
  }
  .content {
    margin-top: 15px;
  }
}
</style>
